<!-- 资讯详情页 -->
<template>
  <div class="page-view">
    <template v-if="isFetched">
      <div v-lazy-container="{ selector: '.news-img' }">
        <p class="news-content-img">
          <img
            :data-src="newsContent.OriginalImg"
            :data-error="require('assets/default.jpg')"
            class="news-img"
          >
        </p>
        <div class="news-title">
          {{ newsContent.title }}
          <p class="news-date">
            {{ newsContent.date }} | 来源: {{ newsContent.Source }}
          </p>
        </div>
        <VHtml
          class="content-info"
          :html="newsContent.content"
        />
      </div>
    </template>
  </div>
</template>

<script lang="ts">
import Vue from 'vue'
import { AppInfo } from 'lib/appMethods'
import { SET_USER_INFO } from '@/store/mutations'
import { HTTP_CODES } from '@/plugins/http.plugin'
export default Vue.extend({
  components: {
    VHtml: () => import('components/VHtml.vue'),
  },
  data () {
    return {
      newsContent: {},
      isFetched: false,
    }
  },
  created () {
    this.newsListContent()
  },
  methods: {
    // 调用资讯详情
    newsListContent () {
      this.$axios({
        method: 'get',
        url: 'News/NewsDetail',
        data: {
          NewsId: this.$route.query.newsId,
        },
      }, 0, () => {
        this.newsListContent()
      }).then(res => {
        this.$set(this.$data, 'newsContent', res)
        this.isFetched = true
      })
    },
  },
})
</script>
<style lang="scss" scoped>
  @import "~scss/news/news.scss";
  .news-content {
    background: #fff;
    padding: 30px 50px;
    min-height: 300px;
  }
  .news-title {
    font-size: 32px;
    line-height: 48px;
    color: #333;
    padding: 15px 30px;
    margin-bottom: 20px;
    .news-date {
        color: #A4A9B2;
        font-size: 26px;
        padding-top: 20px;
    }
  }
  .news-content-img {
    text-align: center;
    margin-bottom: 10px;
    .news-img {
        width: 100%;
        height: 350px;
        text-align: center;
    }
  }
  .content-info {
    color: #666;
    font-size: 28px;
    line-height: 48px;
    padding: 0 30px;
    word-wrap: break-word;
    word-break: break-all;
    overflow: hidden;
    /deep/ img {
      max-width: 100%;
      display: block;
    }
    /deep/ table {
    width: 100%;
    margin: 20px 0;
    td, th {
      // border: 1px solid #ddd;
      border-color: #ddd;
      border-width: 2px;
      border-style: solid;
      padding: 5px 10px;
    }
    caption {
      // border: 1px solid;
      @include px1border(all, #ddd);
      border-bottom: 0;
      text-align: center;
    }
  }
  }
</style>
